<style>
.sp-arrtable-title {
    text-align: center;
    padding: 50px 0 30px;
    font-size: 30px;
    color: #000;
    font-weight: 600;
}
.spa-arrtable-box {
    display: flex;
    width: 100%;
    padding: 0 20px;
    max-width: 1280px;
    margin: 0 auto;
}
.spa-table {
    display: flex;
    flex-flow: wrap;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
.spa-tr {
    width: 50%;
    color: #000;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    padding: 10px 0;
    display: flex;
    align-items: flex-start;
    line-height: 1.2;
}
.spa-td {
    padding: 0 10px;
}
.spa-td.spa-td-left{
    width: 40%;
}
.spa-td.spa-td-right{
    width: 60%; 
}
.spa-td-center{
  text-align: center;
}
@media(max-width:768px){
  .spa-arrtable-box {
      padding: 0 10px;
  }
  .spa-table {
      border: none;
  }
  .spa-tr {
      width: 100%;
      border: 1px solid #ccc;
      margin-top: -1px;
      padding: 0;
      align-items: normal;
  }
  .spa-tr:empty {
      display: none;
  }
  .spa-td.spa-td-left {
      border-right: 1px solid #ccc;
  }
  .spa-td.spa-td-right {
      padding: 10px 2px 10px 10px;
  }
  .spa-td.spa-td-left{
      padding: 10px 5px;
  }
  .sp-arrtable-title{
      padding: 30px 0 20px;
      font-size: 20px;
  }
}
</style>
<div class="sp-arrtable-main" style="background: {{ section.settings.bg }}; display:none;">
    <div class="sp-arrtable-title">{{ section.settings.ATitle }}</div>
    <div class="spa-arrtable-box">
      <div class="spa-table">
        
      {% for block in section.blocks %}
          <div class="spa-tr">
              <div class="spa-td spa-td-left">{{ block.settings.key }}</div>
              <div class="spa-td spa-td-right {% if block.settings.value == '' %} spa-td-center{% endif %}">
                {% if block.settings.value != '' %}
                  {{ block.settings.value }}
                {% else %}
                  /
                {% endif %}
              </div>
          </div>
      {% endfor %}
        
      {% assign SizeModulo = section.blocks.size | modulo:2 %}
      {% if SizeModulo == 1 %}
      <div class="spa-tr"></div>
      {% endif %}
      </div>
    </div>
</div>
<script>
</script>
{% schema %}
{
  "name": "page页 - CMS 属性列表",  
  "class":"sp-page-arrtable",
  "settings": [
    {
      "type": "color",
      "id": "bg",
      "label": "背景颜色",
      "default": "#fff"
    },
    {
      "type": "text",
      "id": "ATitle",
      "label": "标题",
      "default": "Featured Collection"
    }
  ],
  "blocks": [
    {
      "type": "table",
      "name": "属性",
      "settings": [
        {
          "type": "text",
          "id": "key",
          "label": "标题"
        },
        {
          "type": "textarea",
          "id": "value",
          "label": "描述"
        },
      ]
    }
  ],
  "presets": [
    {
      "name": "page页 - CMS 属性列表",
      "category": "page页"
    }
  ]
}
{% endschema %}
